<script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import { onMounted } from 'vue'
// 水球图拓展插件
import 'echarts-liquidfill'

const charts = ref()

const total = ref('216908人')

onMounted(() => {
  // 获取echarts类的实例
  let myCharts = echarts.init(charts.value)
  // 设置实例的配置项
  myCharts.setOption({
    // 标题组件
    title: {
      text: '游客总数',
      top: 50
    },
    // x轴||y轴组件
    xAxis: {},
    yAxis: {},
    // 系列：决定你展示什么样的组件
    series: {
      // bar:柱状图、pie:饼图、line:折线图
      // 这里使用了水球图插件，echarts本来没有水球图
      type: 'liquidFill', // 系列
      data: [0.6, 0.4, 0.2], // 展示数据
      waveAnimation: true, // 动画
      animationDuration: 3, // 时间
      animationDurationUpdate: 0,
      radius: '90%', // 半径
      outline: {
        //外层边框颜色设置
        show: true,
        borderDistance: 8,
        itemStyle: {
          color: 'skyblue',
          borderColor: '#294D99',
          borderWidth: 8,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 0, 0, 0.25)',
        },
      },
    },
    // 布局组件
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    }
  })
})
</script>

<template>
  <div class="tourist">
    <div class="top">
      <div class="left">
        <p class="title">实时游客统计</p>
        <p class="title_bg"></p>
      </div>
      <p class="right">可预约总量&nbsp;<span>999999</span>&nbsp;人</p>
    </div>
    <div class="total">
      <p v-for="(item, index) in total" :key="index">{{ item }}</p>
    </div>
    <div class="charts" ref="charts">

    </div>
  </div>
</template>

<style scoped lang="less">
.tourist {
  padding: 0 10px 15px 0;
  .top {
    display: flex;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    margin-bottom: 20px;
    .left {
      align-self: center;
      .title {
        color: #fff;
        font-size: 16px;
      }
      .title_bg {
        width: 68px;
        height: 7px;
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 8px;
      }
    }
    .right {
      margin-right: 5px;
      margin-top: 30px;
      color: #fff;
      span {
        font-style: italic;
        color: orange;
      }
    }
  }
  .total {
    display: flex;
    padding-left: 20px;
    p {
      width: 55px;
      height: 55px;
      text-align: center;
      line-height: 55px;
      font-size: 30px;
      color: #29fcff;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .charts {
    height: 210px;
    margin-top: 10px;
  }
}
</style>
